<template>
  <Header :check="10"
          @getUserInfo="getUserInfo"
          :title="'记录'" />
  <div class="clear_nav"></div>
  <div id="record">
    <div class="title">
      <p :class="sel_index == 0 ? 'sel' : 'un'"
         @click="topClick(0)">
        {{ $t("hl_all") }}
      </p>
      <p :class="sel_index == 1 ? 'sel' : 'un'"
         @click="topClick(1)">
        {{ $t("hl_chargeOut") }}
      </p>
      <p :class="sel_index == 2 ? 'sel' : 'un'"
         @click="topClick(2)">
        {{ $t("hl_sendWord") }}
      </p>
    </div>

    <div class="list">
      <template v-if="dataList.length">
        <div class="cell"
             v-for="(item, index) in dataList"
             :key="index">
          <h5>{{ item.type == 1 ? $t("hl_withdraw") : $t("hl_sendWord") }}</h5>
          <div>
            <p>
              {{ $t("hl_amount") }}: {{ parseFloat(item.amount).toFixed(4) }}
              {{ item.coin_symbol }}
            </p>
            <h5>
              {{
                item.transfer_status == -1
                  ? $t("hl_fail")
                  : item.transfer_status == 1
                  ? $t("hl_success")
                  : item.transfer_status == 2
                  ? $t("hl_transfering")
                  : $t("hl_waitDoing")
              }}
            </h5>
          </div>
          <h6>{{ item.timestamp }}</h6>
        </div>
      </template>
      <template v-else>
        <div class="no_data">
          <img src="../assets/img/mine/nodata.png" />
          <div>{{ $t("hl_noData") }}</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { api_transferLog } from "../request/api";
import { ref, reactive, watch } from "vue";
import {
  showFailToast,
  showSuccessToast,
  showLoadingToast,
  closeToast,
} from "vant";
import { getFloat, getEstimateGas } from "../utils/common";
import { useRouter } from "vue-router";
import i18n from "@/lang";

const router = useRouter();

let address = ref("");

let sel_index = ref(0);
let dataList = ref([]);
// 那得的数据
function getUserInfo (obj) {
  address.value = obj.address;

  getTransferLog();
}

function getTransferLog (params) {
  showLoadingToast({
    message: i18n.global.t("gg_loading"),
    forbidClick: true,
    duration: 3000,
  });

  api_transferLog({
    address: address.value,
    ...(sel_index.value > 0 ? { type: sel_index.value } : {}),
    page: 1,
    limit: 100,
  }).then((res) => {
    if (res.code == 200)
    {
      closeToast();
      dataList.value = res.data.list;
    }
  });
}

function topClick (index) {
  let TwoTime = Number(sessionStorage.getItem("t_topClick"));
  let news = new Date().getTime();
  if (news - TwoTime < 1000)
  {
    return;
  }
  sessionStorage.setItem("t_topClick", new Date().getTime());

  sel_index.value = index;
  dataList.value = [];
  getTransferLog();
}
</script>

<style scoped lang="less">
#record {
  padding: 10px 3% 0;

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    p {
      height: 32px;
      line-height: 32px;
      border-radius: 4px;
      margin-right: 12px;
      padding: 0 12px;
    }

    .sel {
      background: #1296db;
      color: white;
    }

    .un {
      background: white;
      color: #1296db;
    }
  }

  .list {
    width: 100%;

    .cell {
      width: 100%;
      padding: 3%;
      background: #f2f2f2;
      border-radius: 12px;
      box-shadow: 1px 1px 3px 1px #999;
      margin-bottom: 20px;

      div {
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
          font-size: 14px;
          color: black;
        }
      }
      h5 {
        color: #1296db;
        margin-bottom: 6px;
        font-size: 12px;
      }
      h6 {
        color: #696565;
        margin-bottom: 6px;
        font-size: 12px;
      }
    }
  }
}
</style>
